<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业02</title>
</head>
<style>
    body {
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
    }

    header {
        width: 960px;
        height: 86px;
        margin: 10px auto;
        position: relative;

    }

    #logo {
        width: 101px;
        height: 48px;
        display: inline-block;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    #topRight {
        width: 260px;
        background-color: #eafffa;
        display: inline-block;
        font-size: #7b7b7b;
        position: absolute;
        top: 20px;
        right: 0px;
        padding: 5px;
        border: 1px solid #c8ece3;
        border-bottom: 0px;
    }

    #topRight img {
        position: absolute;
        float: left;
        left: 16px;
        top: -12px;
    }

    #topRight span {
        margin-left: 10px;
        margin-right: 10px;
    }

    /* 导航部分 */
    nav {
        position: absolute;
        top: 40px;
        width: 960px;
    }

    nav ul {
        background-image: url("image/menuBg.jpg");
        background-repeat: repeat-x;
        width: 960px;
        height: 36px;
        padding-left: 0px;
    }

    nav li {
        list-style-type: none;
        display: inline-block;
        height: 36px;
        line-height: 36px;
    }

    nav li a:link,
    a:visited,
    a:hover {
        color: #fff;
        text-decoration: none;
    }

    nav li a {
        display: inline-block;
        height: 36px;
        width: 50px;
    }

    nav li a:hover {

        background-color: #f6915f;
    }

    /* 导航部分 end*/

    /* 内容部分 */
    #content {
        margin: 10px auto;
        border: 2px solid #CCE9AC;
        width: 960px;
        height: 370px;
        position: relative;
        color: #000;
        font-family: "宋体";
    }

    #ph_img {
        position: absolute;
        left: -12px;
        top: 20px;
    }

    /* 内容左侧部分 */
    #content_left {
        display: inline-block;
        width: 480px;
        position: absolute;
        top: 90px;
        left: 0px;
        text-align: left;
    }

    #content_left_words {
        z-index: 2px;
        position: relative;
        left: 260px;
        width: 276px;
        line-height: 26px;
    }

    #content_left_words p {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    /* 内容左侧部分 end*/

    /* 内容右侧部分 */
    #content_right {
        display: inline-block;
        width: 480px;
        height: 280px;
        position: absolute;
        top: 90px;
        left: 480px;
    }

    .content_right_little {
        height: 122px;
        position: relative;
        /* background-color: #333; */
    }

    .content_right_little_img1 {
        position: absolute;
        left: 80px;
        top: -8px;
        z-index: 2;
    }

    .content_right_little_img2 {
        position: absolute;
        left: 80px;
    }

    .content_right_little_words {
        position: relative;
        text-align: left;
        left: 180px;
        top: 4px;
    }
    /* 内容右侧部分 end*/

    /* 书标题 */
    .book_title {
        width: 280px;
        word-break: break-all;
        display: inline-block;
    }

    .book_title,
    .book_title:hover {
        font-size: 14px;
        color: #1A66B3;
        cursor: pointer;
    }

    .book_title:hover {
        color: #1f7fff;
    }

    /* 书标题 end*/

    /* 金额 */
    .price {
        color: #8E112B;
        font-size: 14px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
    }

    /* 折扣 */
    .discount {
        color: #5EA593;
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        margin-left: 12px;
    }

    /* 内容部分 end*/

    /* 底部 */
    footer {
        color: #848484;
        padding-top: 0px;
        margin-top: -10px;
    }
</style>

<body>
    <header>
        <div id="logo"><img src="image/logo.jpg"></div>
        <div id="topRight">
            <span>尾品汇</span>
            <span>当当优品</span>
            <span>数字馆</span>
            <span>都看阅器</span>
            <img src="image/icon_count.png">
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">图书</a></li>
                <li><a href="#">音像</a></li>
                <li><a href="#">童装</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">鞋靴</a></li>
                <li><a href="#">运动</a></li>
                <li><a href="#">箱包</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">珠宝</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">酒</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">数码</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">家电</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <div id="banner"><a href="#"><img src="image/banner.png"></a></div>
        <div id="content">
            <img id="ph_img" src="image/bg_bang.gif">
            <div id="content_left">
                <img style="position:absolute;left: 20px;top:0px;z-index: 1;" src="image/bookNo1.gif">
                <img style="position:absolute;left: 0px;" src="image/book-01.jpg">
                <div id="content_left_words">
                    <a class="book_title">偷影子的人</a>
                    <p>作 者：[法] 马克·李维（Marc Levy）著</p>
                    <p>出版社：湖南文艺出版社</p>
                    <p>当当价：<span class="price">¥ 17.90</span></p>
                    <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”
                    </p>
                </div>
            </div>
            <div id="content_right">
                <div class="content_right_little">
                    <img src="image/bookNo2.gif" class="content_right_little_img1">
                    <img src="image/book-02.jpg" class="content_right_little_img2">
                    <div class="content_right_little_words">
                        <a class="book_title">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a>
                        <p>作 者：柴静 著</p>
                        <p>出版社：广西师范大学出版社</p>
                        <p>
                            <span class="price">¥ 29.40</span>
                            <span class="discount">7.4折</span>
                        </p>
                    </div>
                </div>
                <div class="content_right_little">
                    <img src="image/bookNo3.gif" class="content_right_little_img1">
                    <img src="image/book-03.jpg" class="content_right_little_img2">
                    <div class="content_right_little_words">
                        <a class="book_title">改变孩子先改变自己</a>
                        <p>作 者：贾容韬 贾毅 著</p>
                        <p>出版社：作家出版社</p>
                        <p>
                            <span class="price">¥ 22.20</span>
                            <span class="discount">7.4折</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div id="copyright" style="text-align: center;">
            <span>Copyright(C) 当当网 2004-2017,All Rights Reserved</span>
            <img src="image/validate.gif" style="position: relative; top:14px;">
            <span>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
        </div>
    </footer>
</body>

</html>